import React, { useState } from 'react';
import { Database, Save, RefreshCw, AlertCircle, CheckCircle, Settings, HardDrive, Cloud, Server } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';

const StorageConfig = ({ toggleSidebar }) => {
  const [storageType, setStorageType] = useState('local');
  const [localPath, setLocalPath] = useState('/var/www/storage');
  const [maxFileSize, setMaxFileSize] = useState('100');
  const [allowedTypes, setAllowedTypes] = useState('jpg,jpeg,png,gif,pdf,doc,docx,txt');
  const [s3Config, setS3Config] = useState({
    accessKey: '',
    secretKey: '',
    bucket: '',
    region: 'us-east-1',
    endpoint: ''
  });
  const [ossConfig, setOssConfig] = useState({
    accessKey: '',
    secretKey: '',
    bucket: '',
    region: 'oss-cn-hangzhou',
    endpoint: ''
  });
  const [enableCompression, setEnableCompression] = useState(true);
  const [compressionQuality, setCompressionQuality] = useState('80');
  const [enableThumbnail, setEnableThumbnail] = useState(true);
  const [thumbnailSize, setThumbnailSize] = useState('200x200');

  const storageOptions = [
    { value: 'local', label: '本地存储', icon: HardDrive },
    { value: 's3', label: 'Amazon S3', icon: Cloud },
    { value: 'oss', label: '阿里云OSS', icon: Server },
    { value: 'cos', label: '腾讯云COS', icon: Cloud }
  ];

  const handleSave = () => {
    // 模拟保存配置
    console.log('保存存储配置');
  };

  const testConnection = () => {
    // 模拟测试连接
    console.log('测试存储连接');
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <Database className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    存储配置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    配置文件存储方式和相关参数
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={testConnection}>
                <RefreshCw className="w-4 h-4 mr-2" />
                测试连接
              </Button>

              <Button onClick={handleSave}>
                <Save className="w-4 h-4 mr-2" />
                保存配置
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <div className="max-w-4xl mx-auto space-y-6">
          {/* 存储类型选择 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="w-5 h-5" />
                <span>存储类型</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {storageOptions.map((option) => {
                  const IconComponent = option.icon;
                  return (
                    <button
                      key={option.value}
                      onClick={() => setStorageType(option.value)}
                      className={`p-4 rounded-lg border-2 transition-all ${
                        storageType === option.value
                          ? 'border-primary bg-primary/5'
                          : 'border-material-grey-200 hover:border-material-grey-300'
                      }`}
                    >
                      <div className="flex flex-col items-center space-y-2">
                        <IconComponent className={`w-8 h-8 ${
                          storageType === option.value ? 'text-primary' : 'text-material-grey-500'
                        }`} />
                        <span className={`font-medium ${
                          storageType === option.value ? 'text-primary' : 'text-material-grey-700'
                        }`}>
                          {option.label}
                        </span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          {/* 存储配置 */}
          <Card>
            <CardHeader>
              <CardTitle>存储配置</CardTitle>
            </CardHeader>
            <CardContent>
              <Tabs value={storageType} className="w-full">
                <TabsContent value="local" className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="localPath">存储路径</Label>
                      <Input
                        id="localPath"
                        value={localPath}
                        onChange={(e) => setLocalPath(e.target.value)}
                        placeholder="/var/www/storage"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="maxFileSize">最大文件大小 (MB)</Label>
                      <Input
                        id="maxFileSize"
                        type="number"
                        value={maxFileSize}
                        onChange={(e) => setMaxFileSize(e.target.value)}
                        placeholder="100"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="allowedTypes">允许的文件类型</Label>
                    <Input
                      id="allowedTypes"
                      value={allowedTypes}
                      onChange={(e) => setAllowedTypes(e.target.value)}
                      placeholder="jpg,jpeg,png,gif,pdf,doc,docx,txt"
                    />
                    <p className="text-sm text-material-grey-500">
                      用逗号分隔多个文件扩展名
                    </p>
                  </div>
                </TabsContent>

                <TabsContent value="s3" className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="s3AccessKey">Access Key</Label>
                      <Input
                        id="s3AccessKey"
                        type="password"
                        value={s3Config.accessKey}
                        onChange={(e) => setS3Config({...s3Config, accessKey: e.target.value})}
                        placeholder="输入Access Key"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="s3SecretKey">Secret Key</Label>
                      <Input
                        id="s3SecretKey"
                        type="password"
                        value={s3Config.secretKey}
                        onChange={(e) => setS3Config({...s3Config, secretKey: e.target.value})}
                        placeholder="输入Secret Key"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="s3Bucket">存储桶名称</Label>
                      <Input
                        id="s3Bucket"
                        value={s3Config.bucket}
                        onChange={(e) => setS3Config({...s3Config, bucket: e.target.value})}
                        placeholder="my-bucket"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="s3Region">区域</Label>
                      <Select value={s3Config.region} onValueChange={(value) => setS3Config({...s3Config, region: value})}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="us-east-1">美国东部 (弗吉尼亚北部)</SelectItem>
                          <SelectItem value="us-west-2">美国西部 (俄勒冈)</SelectItem>
                          <SelectItem value="eu-west-1">欧洲 (爱尔兰)</SelectItem>
                          <SelectItem value="ap-southeast-1">亚太地区 (新加坡)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="s3Endpoint">自定义端点 (可选)</Label>
                    <Input
                      id="s3Endpoint"
                      value={s3Config.endpoint}
                      onChange={(e) => setS3Config({...s3Config, endpoint: e.target.value})}
                      placeholder="https://s3.amazonaws.com"
                    />
                  </div>
                </TabsContent>

                <TabsContent value="oss" className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="ossAccessKey">AccessKey ID</Label>
                      <Input
                        id="ossAccessKey"
                        type="password"
                        value={ossConfig.accessKey}
                        onChange={(e) => setOssConfig({...ossConfig, accessKey: e.target.value})}
                        placeholder="输入AccessKey ID"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="ossSecretKey">AccessKey Secret</Label>
                      <Input
                        id="ossSecretKey"
                        type="password"
                        value={ossConfig.secretKey}
                        onChange={(e) => setOssConfig({...ossConfig, secretKey: e.target.value})}
                        placeholder="输入AccessKey Secret"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="ossBucket">存储空间名称</Label>
                      <Input
                        id="ossBucket"
                        value={ossConfig.bucket}
                        onChange={(e) => setOssConfig({...ossConfig, bucket: e.target.value})}
                        placeholder="my-bucket"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="ossRegion">地域节点</Label>
                      <Select value={ossConfig.region} onValueChange={(value) => setOssConfig({...ossConfig, region: value})}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="oss-cn-hangzhou">华东1（杭州）</SelectItem>
                          <SelectItem value="oss-cn-shanghai">华东2（上海）</SelectItem>
                          <SelectItem value="oss-cn-beijing">华北2（北京）</SelectItem>
                          <SelectItem value="oss-cn-shenzhen">华南1（深圳）</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="cos" className="space-y-4">
                  <div className="text-center py-8">
                    <Cloud className="w-12 h-12 mx-auto mb-4 text-material-grey-400" />
                    <h3 className="text-lg font-medium text-material-grey-700 mb-2">
                      腾讯云COS配置
                    </h3>
                    <p className="text-material-grey-500">
                      腾讯云对象存储配置功能即将上线
                    </p>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>

          {/* 高级设置 */}
          <Card>
            <CardHeader>
              <CardTitle>高级设置</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* 图片压缩 */}
              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <Label className="text-base">启用图片压缩</Label>
                  <p className="text-sm text-material-grey-500">
                    自动压缩上传的图片文件以节省存储空间
                  </p>
                </div>
                <Switch
                  checked={enableCompression}
                  onCheckedChange={setEnableCompression}
                />
              </div>

              {enableCompression && (
                <div className="ml-6 space-y-2">
                  <Label htmlFor="compressionQuality">压缩质量 (%)</Label>
                  <Input
                    id="compressionQuality"
                    type="number"
                    min="1"
                    max="100"
                    value={compressionQuality}
                    onChange={(e) => setCompressionQuality(e.target.value)}
                    className="w-32"
                  />
                </div>
              )}

              {/* 缩略图生成 */}
              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <Label className="text-base">生成缩略图</Label>
                  <p className="text-sm text-material-grey-500">
                    为图片文件自动生成缩略图
                  </p>
                </div>
                <Switch
                  checked={enableThumbnail}
                  onCheckedChange={setEnableThumbnail}
                />
              </div>

              {enableThumbnail && (
                <div className="ml-6 space-y-2">
                  <Label htmlFor="thumbnailSize">缩略图尺寸</Label>
                  <Select value={thumbnailSize} onValueChange={setThumbnailSize}>
                    <SelectTrigger className="w-48">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="100x100">100x100</SelectItem>
                      <SelectItem value="150x150">150x150</SelectItem>
                      <SelectItem value="200x200">200x200</SelectItem>
                      <SelectItem value="300x300">300x300</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}
            </CardContent>
          </Card>

          {/* 存储状态 */}
          <Card>
            <CardHeader>
              <CardTitle>存储状态</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="text-center p-4 bg-green-50 rounded-lg">
                  <CheckCircle className="w-8 h-8 mx-auto mb-2 text-green-600" />
                  <div className="text-2xl font-bold text-green-700">98.5%</div>
                  <div className="text-sm text-green-600">可用性</div>
                </div>
                <div className="text-center p-4 bg-blue-50 rounded-lg">
                  <HardDrive className="w-8 h-8 mx-auto mb-2 text-blue-600" />
                  <div className="text-2xl font-bold text-blue-700">2.3GB</div>
                  <div className="text-sm text-blue-600">已使用空间</div>
                </div>
                <div className="text-center p-4 bg-orange-50 rounded-lg">
                  <Database className="w-8 h-8 mx-auto mb-2 text-orange-600" />
                  <div className="text-2xl font-bold text-orange-700">1,234</div>
                  <div className="text-sm text-orange-600">文件总数</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
};

export default StorageConfig;
